import React, { useEffect, useState } from 'react'
import Player from './components/ReactMusicPlayer'
import { type ThemeType, type AppProps } from './interface'
import { ConfigProvider, theme } from 'antd'
function App (props: AppProps): JSX.Element {
  const [playerTheme, setPlayerTheme] = useState<ThemeType>(props.theme === 'dark' ? 'dark' : 'light')

  useEffect(() => {
    if (props.theme !== undefined) {
      setPlayerTheme(props.theme === 'dark' ? 'dark' : 'light')
    }
  }, [props.theme])

  const changePlayerTheme = (): void => {
    if (props.theme === undefined) {
      playerTheme === 'dark' ? setPlayerTheme('light') : setPlayerTheme('dark')
    }
    if (typeof props.onThemeChange === 'function') {
      props.onThemeChange(playerTheme === 'dark' ? 'light' : 'dark')
    }
  }

  return (
    <ConfigProvider
      theme={{
        algorithm: playerTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm
      }}
    >
      <Player {...props} changePlayerTheme={changePlayerTheme} playerTheme={playerTheme} />
    </ConfigProvider>

  )
}

export default App
